<template>
  <div id="myChart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'DynamicLineChart',
  data() {
    return {
      // 实时数据数组
      date: [
        'loading...',
        'loading...',
        'loading...',
        'loading...',
        'loading...',
        'loading...',
        'loading...'
      ],
      yieldRate: [0, 0, 0, 0, 0, 0, 0],
      yieldIndex: [0, 0, 0, 0, 0, 0, 0],
      // 折线图echarts初始化选项
      echartsOption: {
        legend: {
          data: ['实际收益率', '大盘收益率']
        },
        xAxis: {
          name: '时间',
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18
          },
          type: 'category',
          boundaryGap: false,
          data: this.date // 绑定实时数据数组
        },
        yAxis: {
          name: '实际收益率',
          splitLine: { show: true }
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            name: '实际收益率',
            type: 'line',
            smooth: true,
            data: this.yieldRate // 绑定实时数据数组
          },
          {
            name: '大盘收益率',
            type: 'line',
            smooth: true,
            data: this.yieldIndex // 绑定实时数据数组
          }
        ]
      }
    }
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById('myChart'), 'light') // 初始化echarts, theme为light
    this.myChart.setOption(this.echartsOption) // echarts设置初始化选项
    setInterval(this.addData, 3000) // 每三秒更新实时数据到折线图
  },
  methods: {
    // 获取当前时间
    getTime: function() {
      var ts = arguments[0] || 0
      var t, h, i, s
      t = ts ? new Date(ts * 1000) : new Date()
      h = t.getHours()
      i = t.getMinutes()
      s = t.getSeconds()
      // 定义时间格式
      return (
        (h < 10 ? '0' + h : h) +
        ':' +
        (i < 10 ? '0' + i : i) +
        ':' +
        (s < 10 ? '0' + s : s)
      )
    },
    // 添加实时数据
    addData: function() {
      // 从接口获取数据并添加到数组
      this.$axios
        .post('http://localhost:3000/api/Stu/showdata1', {
          // 发送请求 跳转页面
          ID: window.sessionStorage.getItem('shebeiid')
        })
        .then(res => {
          const index = Math.round(Math.random() * 5)
          console.log(index)
          this.yieldRate.push(index.toFixed(3))
          this.yieldIndex.push(index.toFixed(3))
          this.date.push(this.getTime(Math.round(new Date().getTime() / 1000)))
          this.date.splice(0, 1)
          // 重新将数组赋值给echarts选项
          this.echartsOption.xAxis.data = this.date
          this.echartsOption.series[0].data = this.yieldRate
          this.echartsOption.series[1].data = this.yieldIndex
          this.myChart.setOption(this.echartsOption)
        })
    },
    randomData(now, value) {
      value = Math.random() * 100
      var valueName =
        now.getFullYear() +
        '/' +
        (now.getMonth() + 1) +
        '/' +
        now.getDate() +
        ' ' +
        (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) +
        ':' +
        (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) +
        ':' +
        (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds())
      return {
        name: now.toString(),
        value: [valueName, Math.round(value)]
      }
    }
  }
}
</script>

<style>
#myChart {
  width: 100%;
  height: 500px;
  margin: 0 auto;
}
</style>
